
<template>
	<div class="setmeal-container">
	  <!-- 顶部标题 -->
	  <div class="header">
		  <div class="back-btn" @click="goBack">←</div>
	    <h1>选择体检套餐</h1>
	  </div>

	<!-- 套餐列表视图 -->
    <div v-if="currentView === 'list'" class="meal-list">
        <!-- 男士套餐1 -->
        <div class="meal-card">
          <div class="card-content">
            <div class="meal-info">
              <div class="meal-text" @click="goToPersonal">
                <h2 class="meal-category">男士套餐</h2>
                <h3 class="meal-name">普通男士客户-基础套餐</h3>
              </div>
              <button class="detail-btn" @click="showDetail('basic')">详情</button>
            </div>
          </div>
        </div>

        <!-- 男士套餐2 -->
        <div class="meal-card">
          <div class="card-content">
            <div class="meal-info">
              <div class="meal-text">
                <h2 class="meal-category">男士套餐</h2>
                <h3 class="meal-name">普通男士客户-脑血管系统</h3>
              </div>
              <button class="detail-btn" @click="showDetail('cerebrovascular')">详情</button>
            </div>
          </div>
        </div>

        <!-- 男士套餐3 -->
        <div class="meal-card">
          <div class="card-content">
            <div class="meal-info">
              <div class="meal-text">
                <h2 class="meal-category">男士套餐</h2>
                <h3 class="meal-name">普通男士客户-肝病检查</h3>
              </div>
              <button class="detail-btn" @click="showDetail('liver')">详情</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 套餐详情视图 -->
      <div v-else-if="currentView === 'detail'" class="detail-view">
        <div class="detail-header">
          <div class="back-btn" @click="goBack">←</div>
          <h1>{{ currentMeal.title }}</h1>
        </div>

        <div class="detail-content">
          <h2 class="detail-section-title">套餐项目明细</h2>
          <table class="meal-table">
            <thead>
              <tr>
                <th>项目名称</th>
                <th>检查内容</th>
                <th>意义</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in currentMeal.items" :key="index">
                <td>{{ item.project }}</td>
                <td>{{ item.content }}</td>
                <td>{{ item.meaning }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

	<!-- 底部导航 -->
	<div class="bottom-nav">
	  <div class="nav-item" :class="{ active: currentNav === 'hospital' }" @click="navigateTo('/hospital')">
	    <span class="nav-icon">🏥</span>
	    <span class="nav-text">云医院</span>
	  </div>
	  <div class="nav-item" :class="{ active: currentNav === 'mall' }">
	    <span class="nav-icon">🛒</span>
	    <span class="nav-text">商城</span>
	  </div>
	  <div class="nav-item" :class="{ active: currentNav === 'discover' }">
	    <span class="nav-icon">🔍</span>
	    <span class="nav-text">发现</span>
	  </div>
	  <div class="nav-item" :class="{ active: currentNav === 'personal' }" @click="navigateTo('/reportlist')">
	    <span class="nav-icon">👤</span>
	    <span class="nav-text">我</span>
	  </div>
	</div>
	 </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'SetMeal',
  data() {
    return {
      currentView: 'list',
      currentNav: 'hospital',
      navItems: ['云医院', '商城', '发现', '我'],
      currentMeal: {},
      mealDetails: {
        basic: {
          title: '普通男士客户-基础套餐',
          items: [
            {
              project: '一般检查',
              content: '血压、身高、体重、腰围、臀围。',
              meaning: '通过仪器测定人体基本健康指标。'
            },
            {
              project: '血常规',
              content: '血常规24项：中性粒细胞计数绝对值、红细胞压值、血小板比容、单核细胞计数百分比、平均血小板体积、大血小板比例、嗜碱性粒细胞计数百分比、平均血红蛋白含量等。',
              meaning: '临床三大常规检测之一，是最基本的血液检验。通过观察血细胞的数量变化及形态分布，从而判断血液状况及相关疾病。'
            },
            {
              project: '尿常规',
              content: '尿维生素C测定、尿比重测定',
              meaning: '临床三大常规检测之一，可检测泌尿系统疾病及相关代谢性疾病。'
            }
          ]
        },
        cerebrovascular: {
          title: '普通男士客户-脑血管系统',
          items: [
            {
              project: '脑部CT',
              content: '头颅CT平扫',
              meaning: '检测脑部结构异常，如肿瘤、出血、梗塞等。'
            },
            {
              project: '颈动脉超声',
              content: '颈动脉彩色多普勒超声检查',
              meaning: '评估颈动脉血流情况，检测动脉硬化斑块。'
            },
            {
              project: '血脂检查',
              content: '总胆固醇、甘油三酯、高密度脂蛋白、低密度脂蛋白',
              meaning: '评估血脂水平，预测心脑血管疾病风险。'
            }
          ]
        },
        liver: {
          title: '普通男士客户-肝病检查',
          items: [
            {
              project: '肝功能',
              content: '谷丙转氨酶、谷草转氨酶、总胆红素、直接胆红素',
              meaning: '评估肝脏功能状态，检测肝细胞损伤。'
            },
            {
              project: '乙肝五项',
              content: '乙肝表面抗原、表面抗体、e抗原、e抗体、核心抗体',
              meaning: '检测乙肝病毒感染情况及免疫状态。'
            },
            {
              project: '肝脏B超',
              content: '腹部B超肝脏检查',
              meaning: '观察肝脏形态、大小、回声，检测脂肪肝、囊肿、肿瘤等。'
            }
          ]
        }
      }
    }
  },
  methods: {
    showDetail(mealType) {
      this.currentMeal = this.mealDetails[mealType];
      this.currentView = 'detail';
    },
    goBack() {
      if (this.currentView === 'detail') {
        this.currentView = 'list';
        this.currentMeal = {};
      } else {
        // 如果已经在列表页，则返回上一页
        this.$router.go(-1);
      }
    },
    goToPersonal() {
      this.$router.push('/selectdate');
    },
    navigateTo(path) {
      this.$router.push(path);
    }
  },
  mounted() {
    // 可以在这里初始化当前导航状态
  }
}
</script>

<style scoped>
	/* 头部格式 */
	.setmeal-container{
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 60px;
	}

	.header{
		position: relative;
		background: white;
		padding: 15px;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.back-btn{
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 18px;
		cursor: pointer;
	}

	.header h1 {
	  margin: 0;
	  font-size: 18px;
	  color: #333;
	}

	 /* 套餐列表样式 */
	/* 详情页头部 */
	.detail-header {
	  display: flex;
	  align-items: center;
	  padding: 15px;
	  background-color: #fff;
	  border-bottom: 1px solid #eee;
	}

	.detail-header h1 {
	  font-size: 18px;
	  font-weight: 600;
	  margin: 0;
	  flex: 1;
	  text-align: center;
	}

	/* 套餐卡片样式 */
	.meal-list {
	  padding: 15px;
	  padding-bottom: 10px;
	}

	.meal-card {
	  background-color: #ffffff;
	  border: 1px solid #e0e0e0;
	  border-radius: 8px;
	  margin-bottom: 10px;
	  overflow: hidden;
	}

	.card-content {
	  padding: 12px 15px;
	}

	.meal-info {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.meal-text {
	  flex: 1;
	}

	.meal-category {
	  font-size: 14px;
	  font-weight: 600;
	  color: #333;
	  margin: 0 0 4px 0;
	  line-height: 1.2;
	}

	.meal-name {
	  font-size: 13px;
	  font-weight: 400;
	  color: #666;
	  margin: 0;
	  line-height: 1.3;
	}

	.detail-btn {
	  background-color: #4a90e2;
	  color: white;
	  border: none;
	  border-radius: 15px;
	  padding: 6px 12px;
	  font-size: 12px;
	  cursor: pointer;
	  transition: background-color 0.2s;
	  white-space: nowrap;
	  margin-left: 10px;
	}

	.detail-btn:hover {
	  background-color: #3a7bc8;
	}

	/* 详情内容样式 */
	.detail-content {
	  padding: 15px;
	  padding-bottom: 10px;
	}

	.detail-section-title {
	  font-size: 16px;
	  font-weight: 600;
	  margin-bottom: 15px;
	  color: #333;
	}

	.meal-table {
	  width: 100%;
	  border-collapse: collapse;
	  font-size: 12px;
	}

	.meal-table th,
	.meal-table td {
	  border: 1px solid #ddd;
	  padding: 8px;
	  text-align: left;
	  vertical-align: top;
	}

	.meal-table th {
	  background-color: #f5f5f5;
	  font-weight: 600;
	  color: #333;
	}

	.meal-table tr:nth-child(even) {
	  background-color: #f9f9f9;
	}

	.meal-table tr:hover {
	  background-color: #f0f0f0;
	}


	/* 底部格式 */
	.bottom-nav {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: white;
	  display: flex;
	  justify-content: space-around;
	  padding: 10px 0;
	  border-top: 1px solid #eee;
	}

	.nav-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  cursor: pointer;
	}

	.nav-icon {
	  font-size: 20px;
	  margin-bottom: 2px;
	}

	.nav-text {
	  font-size: 10px;
	  color: #666;
	}

	.nav-item.active .nav-text {
	  color: #1890ff;
	}
</style>



<!--
<template>
	<div class="setmeal-container">
	  &lt;!&ndash; 顶部标题 &ndash;&gt;
	  <div class="header">
		  <div class="back-btn" @click="goBack">←</div>
	    <h1>选择体检套餐</h1>
	  </div>
	
	 &lt;!&ndash; 套餐列表 &ndash;&gt;
	      <div class="meal-list">
	        &lt;!&ndash; 男士套餐1 &ndash;&gt;
	        <div class="meal-card">
	          <div class="card-content">
	            <div class="meal-info">
	              <div class="meal-text">
	                <h2 class="meal-category">男士套餐</h2>
	                <h3 class="meal-name">普通男士客户-基础套餐</h3>
	              </div>
	              <button class="detail-btn" @click="showDetail('basic')">详情</button>
	            </div>
	          </div>
	        </div>
	
	        &lt;!&ndash; 男士套餐2 &ndash;&gt;
	        <div class="meal-card">
	          <div class="card-content">
	            <div class="meal-info">
	              <div class="meal-text">
	                <h2 class="meal-category">男士套餐</h2>
	                <h3 class="meal-name">普通男士客户-脑血管系统</h3>
	              </div>
	              <button class="detail-btn" @click="showDetail('cerebrovascular')">详情</button>
	            </div>
	          </div>
	        </div>
	
	        &lt;!&ndash; 男士套餐3 &ndash;&gt;
	        <div class="meal-card">
	          <div class="card-content">
	            <div class="meal-info">
	              <div class="meal-text">
	                <h2 class="meal-category">男士套餐</h2>
	                <h3 class="meal-name">普通男士客户-肝病检查</h3>
	              </div>
	              <button class="detail-btn" @click="showDetail('liver')">详情</button>
	            </div>
	          </div>
	        </div>
	      </div>
	
	
	
	
	
	
	&lt;!&ndash; 底部导航 &ndash;&gt;
	<div class="bottom-nav">
	  <div class="nav-item" :class="{ active: currentNav === 'hospital' }">
	    <span class="nav-icon">🏥</span>
	    <span class="nav-text">云医院</span>
	  </div>
	  <div class="nav-item" :class="{ active: currentNav === 'mall' }">
	    <span class="nav-icon">🛒</span>
	    <span class="nav-text">商城</span>
	  </div>
	  <div class="nav-item" :class="{ active: currentNav === 'discover' }">
	    <span class="nav-icon">🔍</span>
	    <span class="nav-text">发现</span>
	  </div>
	  <div class="nav-item" :class="{ active: currentNav === 'personal' }" @click="goToPersonal">
	    <span class="nav-icon">👤</span>
	    <span class="nav-text">我</span>
	  </div>
	</div>
	 </div>
</template>

<script setup>
export default {
  name: 'SetMeal',
  data() {
    return {
      currentView: 'list',
      currentNav: 0,
      navItems: ['云医院', '商城', '发现', '我'],
      currentMeal: {},
      mealDetails: {
        basic: {
          title: '普通男士客户-基础套餐',
          items: [
            {
              project: '一般检查',
              content: '血压、身高、体重、腰围、臀围。',
              meaning: '通过仪器测定人体基本健康指标。'
            },
            {
              project: '血常规',
              content: '血常规24项：中性粒细胞计数绝对值、红细胞压值、血小板比容、单核细胞计数百分比、平均血小板体积、大血小板比例、嗜碱性粒细胞计数百分比、平均血红蛋白含量等。',
              meaning: '临床三大常规检测之一，是最基本的血液检验。通过观察血细胞的数量变化及形态分布，从而判断血液状况及相关疾病。'
            },
            {
              project: '尿常规',
              content: '尿维生素C测定、尿比重测定',
              meaning: '临床三大常规检测之一，可检测泌尿系统疾病及相关代谢性疾病。'
            }
          ]
        },
        cerebrovascular: {
          title: '普通男士客户-脑血管系统',
          items: [
            {
              project: '脑部CT',
              content: '头颅CT平扫',
              meaning: '检测脑部结构异常，如肿瘤、出血、梗塞等。'
            },
            {
              project: '颈动脉超声',
              content: '颈动脉彩色多普勒超声检查',
              meaning: '评估颈动脉血流情况，检测动脉硬化斑块。'
            },
            {
              project: '血脂检查',
              content: '总胆固醇、甘油三酯、高密度脂蛋白、低密度脂蛋白',
              meaning: '评估血脂水平，预测心脑血管疾病风险。'
            }
          ]
        },
        liver: {
          title: '普通男士客户-肝病检查',
          items: [
            {
              project: '肝功能',
              content: '谷丙转氨酶、谷草转氨酶、总胆红素、直接胆红素',
              meaning: '评估肝脏功能状态，检测肝细胞损伤。'
            },
            {
              project: '乙肝五项',
              content: '乙肝表面抗原、表面抗体、e抗原、e抗体、核心抗体',
              meaning: '检测乙肝病毒感染情况及免疫状态。'
            },
            {
              project: '肝脏B超',
              content: '腹部B超肝脏检查',
              meaning: '观察肝脏形态、大小、回声，检测脂肪肝、囊肿、肿瘤等。'
            }
          ]
        }
      }
    }
  },
  methods: {
    showDetail(mealType) {
      this.currentMeal = this.mealDetails[mealType];
      this.currentView = 'detail';
    },
    goBack() {
      this.currentView = 'list';
      this.currentMeal = {};
    },
    goBackToList() {
      // 这里可以添加返回上一页的逻辑
      // 例如：this.$router.go(-1) 或 this.$router.push('/previous-page')
      alert('返回上一页');
    },
    selectNav(index) {
      this.currentNav = index;
    }
  }
}
</script>

<style scoped>
	/* 头部格式 */
	.setmeal-container{
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 60px;
	}
	
	.header{
		position: relative;
		background: white;
		padding: 15px;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	
	.back-btn{
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 18px;
		cursor: pointer;
	}
	
	.header h1 {
	  margin: 0;
	  font-size: 18px;
	  color: #333;
	}
	
	 /* 套餐列表样式 */
	/* 详情页头部 */
	.detail-header {
	  display: flex;
	  align-items: center;
	  padding: 15px;
	  background-color: #fff;
	  border-bottom: 1px solid #eee;
	}
	
	.detail-header h1 {
	  font-size: 18px;
	  font-weight: 600;
	  margin: 0;
	  flex: 1;
	  text-align: center;
	}
	
	/* 套餐卡片样式 */
	.meal-list {
	  padding: 15px;
	  padding-bottom: 10px;
	}
	
	.meal-card {
	  background-color: #ffffff;
	  border: 1px solid #e0e0e0;
	  border-radius: 8px;
	  margin-bottom: 10px;
	  overflow: hidden;
	}
	
	.card-content {
	  padding: 12px 15px;
	}
	
	.meal-info {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.meal-text {
	  flex: 1;
	}
	
	.meal-category {
	  font-size: 14px;
	  font-weight: 600;
	  color: #333;
	  margin: 0 0 4px 0;
	  line-height: 1.2;
	}
	
	.meal-name {
	  font-size: 13px;
	  font-weight: 400;
	  color: #666;
	  margin: 0;
	  line-height: 1.3;
	}
	
	.detail-btn {
	  background-color: #4a90e2;
	  color: white;
	  border: none;
	  border-radius: 15px;
	  padding: 6px 12px;
	  font-size: 12px;
	  cursor: pointer;
	  transition: background-color 0.2s;
	  white-space: nowrap;
	  margin-left: 10px;
	}
	
	.detail-btn:hover {
	  background-color: #3a7bc8;
	}
	
	/* 详情内容样式 */
	.detail-content {
	  padding: 15px;
	  padding-bottom: 10px;
	}
	
	.detail-section-title {
	  font-size: 16px;
	  font-weight: 600;
	  margin-bottom: 15px;
	  color: #333;
	}
	
	.meal-table {
	  width: 100%;
	  border-collapse: collapse;
	  font-size: 12px;
	}
	
	.meal-table th,
	.meal-table td {
	  border: 1px solid #ddd;
	  padding: 8px;
	  text-align: left;
	  vertical-align: top;
	}
	
	.meal-table th {
	  background-color: #f5f5f5;
	  font-weight: 600;
	  color: #333;
	}
	
	.meal-table tr:nth-child(even) {
	  background-color: #f9f9f9;
	}
	
	.meal-table tr:hover {
	  background-color: #f0f0f0;
	}   
	 
		
	/* 底部格式 */
	.bottom-nav {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: white;
	  display: flex;
	  justify-content: space-around;
	  padding: 10px 0;
	  border-top: 1px solid #eee;
	}
	
	.nav-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  cursor: pointer;
	}
	
	.nav-icon {
	  font-size: 20px;
	  margin-bottom: 2px;
	}
	
	.nav-text {
	  font-size: 10px;
	  color: #666;
	}
	
	.nav-item.active .nav-text {
	  color: #1890ff;
	}
</style>-->
